<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
                <el-breadcrumb-item>Vue表格组件</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="plugins-tips">
            vue-datasource：一个用于动态创建表格的vue.js服务端组件。
            访问地址：<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
        </div>
        <datasource  :table-data="getData" :columns="columns" :pagination="pagination"
                :actions="actions"
                v-on:change="changePage"
                v-on:searching="onSearch"></datasource>
    </div>
</template>

<script>
    import axios from 'axios';
    import Datasource from 'vue-datasource';
    export default {
        data: function(){
            return {
                url: 'http://localhost:8081/position/all',
                dataList:[],
                curPage:1,
                pageSize:10,
                total:0,
                pagination:{
                    "total": 15,
                    "per_page": 15,
                    "current_page": 1,
                    "last_page": 1,
                    "from": 1,
                    "to": 15
                },
                columns: [
                    {
                        name: 'Id',
                        key: 'id',
                    },
                    {
                        name: 'Name',
                        key: 'positionName',
                    },
                    {
                        name: 'companyFullName',
                        key: 'companyFullName',
                    },
                    {
                        name: 'financeStage',
                        key: 'financeStage',
                    },
                    {
                        name: 'district',
                        key: 'district',
                    },
                    {
                        name: 'salary',
                        key: 'salary',
                    },
                    {
                        name: 'workYear',
                        key: 'salary',
                    },
                    {
                        name: 'companySize',
                        key: 'companySize',
                    }
                ],
                actions: [
                    {
                        text: 'Click',
                        class: 'btn-primary',
                        event(e, row) {
                            self.$message('选中的行数： ' + row.row.id);
                        }
                    }
                ],
                query:''
            }
        },
        components: {
            Datasource
        },
        methods: {
            changePage(values) {
                this.curPage = values.page;
                this.pagination.per_page = values.perpage;
            },
            onSearch(searchQuery) {
                this.query = searchQuery;
            },
            request(){
                this.$axios.get(this.url,{params:{pageNumber:this.curPage,pageSize:this.pageSize}}).then( (res) => {
                    this.dataList = res.data.data.records;
                    this.pagination.total = res.data.data.total;
                    this.pagination.current_page = this.curPage;
                    this.pagination.last_page = res.data.data.pages;
                })

            }
        },
        computed:{
            getData(){
                this.request();
                console.log("total"+this.total)
                console.log("compute"+this.dataList)
                return this.dataList;
//              return self.data.filter(function (d) {
//                    if(d.positionName.indexOf(self.query) > -1){
//                        return d;
//                    }
//                })
            }
        },
        beforeMount(){
//           if(process.env.NODE_ENV === 'development'){
//                this.url = '/ms/table/source';
//           };
            this.request();
        }
    }
</script>

<style src="../../../static/css/datasource.css"></style>